<template>
    <div>
        <el-dialog :title="type == 'create' ? '新增客户' : '编辑客户'" :visible.sync="dialogVisible" width="80%"
            :before-close="handleClose">
            <el-form ref="formData" :model="form" label-width="120px" inline size="mini">
                <div>基本信息</div>
                <el-form-item prop="cmsClient.servicePeriod" label="服务类型："
                    :rules="[{ required: true, message: '请选择服务类型', trigger: 'change' }]">
                    <el-select v-model="form.cmsClient.servicePeriod" clearable placeholder="请选择服务类型">
                        <el-option v-for="item in client_service_periodList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="助记码：">
                    <el-input v-model="form.cmsClient.helpCode" clearable placeholder="请输入助记码"></el-input>
                </el-form-item>
                <el-form-item label="纳税人性质：" :rules="[{ required: true, message: '请选择纳税人性质', trigger: 'change' }]"
                    prop="cmsClient.clientProperty">
                    <el-select v-model="form.cmsClient.clientProperty" clearable placeholder="请选择纳税人性质">
                        <el-option v-for="item in client_propertyList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="cmsClient.clientPropertyType"
                    :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
                    <el-select v-model="form.cmsClient.clientPropertyType" clearable placeholder="请选择">
                        <el-option v-for="item in client_property_typeList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户名称：" prop="cmsClient.clientName"
                    :rules="[{ required: true, message: '客户名称不能为空', trigger: 'blur' }]">
                    <el-input v-model="form.cmsClient.clientName" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
                <el-form-item label="纳税人识别号：" prop="cmsClient.creditCode"
                    :rules="[{ required: true, message: '纳税人识别号不能为空', trigger: 'blur' }]">
                    <el-input v-model="form.cmsClient.creditCode" clearable placeholder="请输入纳税人识别号"></el-input>
                </el-form-item>
                <el-form-item label="旧税号：">
                    <el-input v-model="form.cmsClient.oldTaxNo" clearable placeholder="请输入旧税号"></el-input>
                </el-form-item>
                <el-form-item label="所属区域：" prop="cmsClient.provinceAreaId"
                    :rules="[{ required: true, message: '请选择所属区域', trigger: 'change' }]">

                    <el-select filterable clearable v-model="form.cmsClient.provinceAreaId" placeholder="请选择所属省份">
                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>

                </el-form-item>
                <div>网报账号</div>
                <div style="margin-left: 30px; margin-top: 10px;">
                    <div style="display: flex; justify-content: space-between;">
                        <span>企业登录+实名验证</span>
                        <el-button size="mini" type="primary" @click="addcmsClientLoginList()">添加</el-button>
                    </div>
                    <div v-for="(item, index) in form.cmsClientLoginList" :key="index">
                        <el-row :gutter="2" justify="space-between">
                            <el-col :span="4">
                                <el-form-item label="用户名：" :prop="'cmsClientLoginList.' + index + '.realName'"
                                    :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
                                    <el-input v-model="item.realName" clearable placeholder="请输入用户名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="实名密码：" :prop="'cmsClientLoginList.' + index + '.realPassword'"
                                    :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                                    <el-input v-model="item.realPassword" clearable placeholder="请输入密码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="办税手机号" :prop="'cmsClientLoginList.' + index + '.realPhone'"
                                    :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
                                    <el-input v-model="item.realPhone" clearable placeholder="请输入办税手机号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="验证方式:" :prop="'cmsClientLoginList.' + index + '.realAuthMode'"
                                    :rules="[{ required: true, message: '请选择验证方式', trigger: 'change' }]">
                                    <el-select v-model="item.realAuthMode">
                                        <el-option v-for="v in client_saic_auth_modeList" :key="v.value"
                                            :value="v.value" :label="v.label"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="身份" :prop="'cmsClientLoginList.' + index + '.realJob'"
                                    :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
                                    <el-select v-model="item.realJob">
                                        <el-option v-for="v in client_net_auth_identityList" :key="v.value"
                                            :value="v.value" :label="v.label"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-form-item>
                                    <el-switch v-model="item.loginEnableStatus" :active-value="1" :inactive-value="0"
                                        @change="changeStatus(item, index)"></el-switch>
                                </el-form-item>
                            </el-col>

                            <el-col :span="2">
                                <el-form-item>
                                    <el-button v-if="item.loginEnableStatus != 1" size="mini"
                                        @click="deletecmsClientLoginList(index)">删除</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <span>代理登录+实名验证</span>
                    </div>
                    <div style="margin-top: 20px" v-for="(item, index) in form.adList" :key="index + 'a'">
                        <el-row :gutter="2" justify="space-between">
                            <el-col :span="4">
                                <el-form-item label="代理机构识别号:" :prop="'adList.' + index + '.proxyNo'"
                                    :rules="[{ required: true, message: '请输入代理机构识别号', trigger: 'blur' }]">
                                    <el-input v-model="item.proxyNo" placeholder="请输入代理机构识别号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="实名密码:" :prop="'adList.' + index + '.proxyPassword'"
                                    :rules="[{ required: true, message: '请输入实名密码', trigger: 'blur' }]">
                                    <el-input v-model="item.proxyPassword" placeholder="请输入代理机构名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="手机号:" :prop="'adList.' + index + '.proxyPhone'"
                                    :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
                                    <el-input v-model="item.proxyPhone" placeholder="请输入手机号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="验证方式:" :prop="'adList.' + index + '.proxyAuthMode'"
                                    :rules="[{ required: true, message: '请选择验证方式', trigger: 'change' }]">
                                    <el-select v-model="item.proxyAuthMode">
                                        <el-option v-for="v in client_saic_auth_modeList" :key="v.value"
                                            :value="v.value" :label="v.label"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-form-item>
                                    <el-switch v-model="item.proxyEnableStatus" :active-value="1" :inactive-value="0"
                                        @change="changeAdStatus(item, index)"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div>个税账号</div>
                <div style=" margin-top: 10px;">
                    <el-form-item label="登录方式：">
                        <el-radio-group v-model="form.cmsClient.taxAccountMode">
                            <el-radio label="1">实名登录</el-radio>
                            <el-radio label="2">申报密码登录</el-radio>
                            <el-radio label="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-row :gutter="2" justify="space-between" v-if="form.cmsClient.taxAccountMode == '1'">
                        <el-col :span="5">
                            <el-form-item label="个税实名账号：" prop="cmsClient.taxLoginName"
                                :rules="[{ required: true, message: '请输入个税实名账号', trigger: 'blur' }]">
                                <el-input v-model="form.cmsClient.taxLoginName" placeholder="请输入个税实名账号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="个税实名密码：" prop="cmsClient.taxLoginPassword"
                                :rules="[{ required: true, message: '请输入个税实名密码', trigger: 'blur' }]">
                                <el-input v-model="form.cmsClient.taxLoginPassword" placeholder="请输入个税实名密码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="2" justify="space-between" v-if="form.cmsClient.taxAccountMode == '2'">
                        <el-col :span="5">
                            <el-form-item label="个税申报密码：" prop="cmsClient.taxDeclarePassword"
                                :rules="[{ required: true, message: '请输入个税申报密码', trigger: 'blur' }]">
                                <el-input v-model="form.cmsClient.taxDeclarePassword"
                                    placeholder="请输入个税申报密码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div>工商系统账号</div>
                <div style=" margin-top: 30px;">
                    <div>
                        <el-form-item label="登录方式：">
                            <el-radio-group v-model="form.cmsClient.saicAccountMode">
                                <el-radio label="1">工商联络员</el-radio>
                                <el-form-item prop="cmsClient.saicAuthMode">
                                    <el-select v-model="form.cmsClient.saicAuthMode"
                                        v-if="form.cmsClient.saicAccountMode == '1'">
                                        <el-option v-for="v in client_saic_auth_modeList" :key="v.value"
                                            :value="v.value" :label="v.label"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-radio label="0">无</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-row :gutter="2" justify="space-between" v-if="form.cmsClient.saicAccountMode == '1'">
                            <el-col :span="5">
                                <el-form-item label="手机号码：" prop="cmsClient.saicPhone"
                                    :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' }]">
                                    <el-input v-model="form.cmsClient.saicPhone" placeholder="请输入手机号码"></el-input>
                                </el-form-item>

                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="证件号码：" prop="cmsClient.saicCode"
                                    :rules="[{ required: true, message: '请输入证件号码', trigger: 'blur' }]">
                                    <el-input v-model="form.cmsClient.saicCode" placeholder="请输入验证码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div>联系人</div>
                <div>
                    <div style="display: flex; justify-content: space-between;">
                        <span></span>
                        <el-button size="mini" type="primary" @click="addUserList()">添加</el-button>
                    </div>
                    <div v-for="(item, index) in form.cmsClientLinkList" :key="index + 'a'">
                        <el-row :gutter="2" justify="space-between">
                            <el-col :span="5">
                                <el-form-item label="姓名:" :prop="'cmsClientLinkList.' + index + '.linkName'"
                                    :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                                    <el-input v-model="item.linkName" placeholder="请输入姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="职位:" :prop="'cmsClientLinkList.' + index + '.linkJob'"
                                    :rules="[{ required: true, message: '请输入职位', trigger: 'blur' }]">
                                    <el-select v-model="item.linkJob" placeholder="请选择职位">
                                        <el-option v-for="item in client_link_jobList" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>

                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="手机号:" :prop="'cmsClientLinkList.' + index + '.linkPhone'"
                                    :rules="[{ required: true, message: '请输入手机号', trigger: 'blur', }]">
                                    <el-input v-model="item.linkPhone" placeholder="请输入手机号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-form-item>
                                    <el-button size="mini" @click="deleteUser(index)">删除</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>

            </el-form>
            <template slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit()">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { addCreditCustomer, getCreditCustomerDetail, getCreditCustomerList } from '@/api/customer'
import { getDictData } from '@/utils/dict'
import { getProvinceList } from "@/api/tax";
import { rules } from '../../options';
export default {
    data() {
        return {
            dialogVisible: false,
            type: 'create',
            form: {
                cmsClient: {
                    servicePeriod: '', //服务类型
                    helpCode: '', // 助记码
                    clientProperty: '', // 纳税人性质
                    clientPropertyType: '', // 纳税人性质类型
                    clientName: '', //客户名称
                    creditCode: '', // 纳税人识别号
                    oldTaxNo: '', // 原纳税人识别号
                    provinceAreaId: '', // 所属区域省份
                    taxAccountMode: '1', //个税账号登录账号
                    taxLoginName: '', //个税实名账号
                    taxLoginPassword: '', //个税实名密码
                    taxDeclarePassword: '', //个税申报密码
                    saicAccountMode: '', //工商系统账号登录方式
                    saicAuthMode: '', //工商系统账号登录方式工商联络员验证方式
                    saicPhone: '',//工商系统账号手机号码
                    saicIdNo: '', //工商系统账号证件号码
                    
                },
                adList: [{ proxyNo: '', proxyPassword: '', proxyPhone: '', proxyAuthMode: '', proxyEnableStatus: 0 }],
                cmsClientLoginList: [{ realName: '', realPassword: '', realPhone: '', realJob: '', realAuthMode: null, loginEnableStatus: 1 }],
                cmsClientLinkList: [{ linkName: '', linkJob: '', linkPhone: '' }] //联系人信息
            },
            client_net_auth_modeList: [],//网报账号-验证方式
            client_net_auth_identityList: [],// 网报账号-验证身份
            client_saic_account_modeList: [], //工商系统账号-登录方式
            client_saic_auth_modeList: [], //工商联络员-验证方式
            client_property_typeList: [],
            client_propertyList: [], //纳税人性质
            client_service_periodList: [], //服务类型
            client_link_jobList: [], //联系人职务
            provinceList: []
        }
    },
    created() {

    },
    methods: {
        handleEdit() {
            console.log(this.form);
            this.$refs.formData.validate((valid) => {
                console.log(valid);
                if (valid) {
                    let params = Object.assign({}, this.form);
                    params.cmsClient = {
                        ...params.cmsClient,
                        ...params.adList[0]
                    }
                    delete params.adList

                    if(this.type == 'create') {
                        addCreditCustomer(params).then((res) => {
                        this.$message.success('添加成功')
                        this.$emit('getList')
                        this.dialogVisible = false
                    });
                    } else {
                        getCreditCustomerList(params).then((res) => {
                        this.$message.success('修改成功')
                        this.$emit('getList')
                        this.dialogVisible = false
                    });

                    }

                    
                }
            })
        },
        getProvinceList() {
            getProvinceList().then(res => {
                this.provinceList = res.data;
            })

        },
        getDictData() {
            let dictList = ['client_link_job', 'client_service_period', 'client_property', 'client_property_type', 'client_net_auth_mode', 'client_net_auth_identity', 'client_saic_account_mode', 'client_saic_auth_mode']
            dictList.forEach(v => {
                getDictData(v).then(res => {
                    this[v + 'List'] = res
                })
            })
        },
        addUserList() {
            this.form.cmsClientLinkList.push({ linkName: '', linkJob: '', linkPhone: '' })
        },
        deleteUser(idx) {
            this.form.cmsClientLinkList.splice(idx, 1)
        },
        changeAdStatus(item, idx) {
            if (item.proxyEnableStatus == 1) {
                this.form.cmsClientLoginList.forEach(v => {
                    v.loginEnableStatus = 0
                })
            } else {
                this.form.cmsClientLoginList[0].loginEnableStatus = 1
            }

        },
        changeStatus(item, idx) {
            if (item.loginEnableStatus == 0) {
                const isTrue = this.form.cmsClientLoginList.every(v => v.loginEnableStatus == 0)
                if (isTrue) {
                    this.form.cmsClientLoginList[idx].loginEnableStatus = 1
                }
            } else {
                this.form.cmsClientLoginList.forEach((v, i) => {
                    if (i != idx) {
                        v.loginEnableStatus = 0;
                    }
                })
            }
            this.form.adList[0].proxyEnableStatus = 0;
        },
        addcmsClientLoginList() {
            this.form.cmsClientLoginList.push({ name: '', psd: '', phone: '', type: '', idType: '', publishStatus: 0 })
        },
        deletecmsClientLoginList(idx) {
            this.form.cmsClientLoginList.splice(idx, 1)
        },
        async open(type, data) {
            await this.getDictData()
            await this.getProvinceList()
            this.type = type
            if (type == 'edit') {
                getCreditCustomerDetail(data.id).then(res => {
                    console.log(res);
                    const data = res.data
                    data.adList = [{ proxyNo: data.cmsClient.proxyNo, proxyPassword: data.cmsClient.proxyPassword, proxyPhone: data.cmsClient.proxyPhone, proxyAuthMode: data.cmsClient.proxyAuthMode, proxyEnableStatus: data.cmsClient.proxyEnableStatus },]
                    this.form = data
                })
            }
            this.dialogVisible = true

        },
        handleClose() {
            this.form = {
                cmsClient: {
                    servicePeriod: '', //服务类型
                    helpCode: '', // 助记码
                    clientProperty: '', // 纳税人性质
                    clientPropertyType: '', // 纳税人性质类型
                    clientName: '', //客户名称
                    creditCode: '', // 纳税人识别号
                    oldTaxNo: '', // 原纳税人识别号
                    provinceAreaId: '', // 所属区域省份
                    taxAccountMode: '1', //个税账号登录账号
                    taxLoginName: '', //个税实名账号
                    taxLoginPassword: '', //个税实名密码
                    taxDeclarePassword: '', //个税申报密码
                    saicAccountMode: '', //工商系统账号登录方式
                    saicAuthMode: '', //工商系统账号登录方式工商联络员验证方式
                    saicPhone: '',//工商系统账号手机号码
                    saicIdNo: '', //工商系统账号证件号码
                    
                },
                adList: [{ proxyNo: '', proxyPassword: '', proxyPhone: '', proxyAuthMode: '', proxyEnableStatus: 0 }],
                cmsClientLoginList: [{ realName: '', realPassword: '', realPhone: '', realJob: '', realAuthMode: null, loginEnableStatus: 1 }],
                cmsClientLinkList: [{ linkName: '', linkJob: '', linkPhone: '' }] //联系人信息
            },
            this.$refs.formData.resetFields()
            this.dialogVisible = false
        }
    }
}
</script>